<template>
  <el-dialog  append-to-body :visible.sync="show" width="600px">
    <div class="flex_center">
      <pdf
        style="display: inline-block;width:520px;"
        ref="pdf"
        :src="src"
        :page="pageNum"
        :rotate="pageRotate"
        @password="password"
        @progress="loadedRatio = $event"
        @page-loaded="pageLoaded($event)"
        @num-pages="pageTotalNum = $event"
        @error="pdfError($event)"
        @link-clicked="page = $event"
      ></pdf>
    </div>

  </el-dialog>
</template>

<script>
import pdf from "vue-pdf-signature";
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory";
export default {
  props: {
    // 当前pdf路径
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  components: {
    pdf
  },
  data() {
    return {
      show: false,
      src:'',
      // 总页数
      pageTotalNum: 1,
      // 当前页数
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      // 页面加载完成
      curPageNum: 0,
      // 放大系数 默认百分百
      scale: 100,
      // 旋转角度 ‘90’的倍数才有效
      pageRotate: 0,
      // 单击内部链接时触发 (目前我没有遇到使用场景)
      page: 0
    };
  },
  watch: {
    pdfUrl:{
      handler(val){
        this.src = pdf.createLoadingTask({
          url: val,
          CMapReaderFactory
        });
      },
      deep:true
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open() {
      this.show = true;
    },
    //下载PDF
    fileDownload(data, fileName) {
      let blob = new Blob([data], {
        //type类型后端返回来的数据中会有，根据自己实际进行修改
        type: 'application/pdf;charset-UTF-8'
      });
      let filename = fileName || 'pdf.pdf';
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename);
      } else {
        var blobURL = window.URL.createObjectURL(blob);
        // 创建隐藏<a>标签进行下载
        var tempLink = document.createElement('a');
        tempLink.style.display = 'none';
        tempLink.href = blobURL;
        tempLink.setAttribute('download', filename);
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank');
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
      }
    },

    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
    },

    //缩小
    scaleX() {
      // scale 是百分百展示 不建议缩放
      if (this.scale == 100) {
        return;
      }
      this.scale += -5;
      console.log(parseInt(this.scale) + '%');
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
    },
    // 切换上一页
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 切换下一页
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    // 顺时针选中角度
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针旋转角度
    counterClock() {
      this.pageRotate -= 90;
    },
    // pdf 有密码 则需要输入秘密
    password(updatePassword, reason) {
      updatePassword(prompt('password is "test"'));
      console.log('...reason...');
      console.log(reason);
      console.log('...reason...');
    },
    // 页面加载成功  当前页数
    pageLoaded(e) {
      this.$emit('current', e);
      this.curPageNum = e;
    },
    // 异常监听
    pdfError(error) {
      console.error(error);
    },
    // 打印所有
    pdfPrintAll() {
      this.$refs.pdf.print();
    },
    // 打印 第一页和第二页
    pdfPrint() {
      // 第一个参数 文档打印的分辨率
      // 第二个参数 文档打印的页数
      this.$refs.pdf.print(100, [1, 2]);
    },
    // 获取当前页面pdf的文字信息内容
    logContent() {
      this.$refs.pdf.pdf.forEachPage(function(page) {
        return page.getTextContent().then(function(content) {
          let text = content.items.map(item => item.str);
          let allStr = content.items.reduce((initVal, item) => (initVal += item.str), '');
          console.log(allStr); // 内容字符串
          console.log(text); // 内容数组
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pdf {
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
}
</style>
